<template>
  <div class="home">
    <div class="claymorphism" style="display: flex">
      <div
        class="header"
        style="display: flex; flex-direction: column; justify-content: center"
      >
        <h2>数据统计</h2>
        <p>在这里可以直观看到各系各班的人数状态，和总体状态</p>
      </div>
    </div>
    <div class="content">
      <div class="claymorphism block1">
        <div class="actions">
          <div class="action-item">
            <el-select v-model="countMode" placeholder="请选择">
              <el-option
                v-for="item in modeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="action-item">
            <el-button type="primary" @click="changeCountChart(countMode)"
              >查询</el-button
            >
          </div>
        </div>
        <div
          class="count-chart"
          ref="counts"
          v-show="chartData.length > 0"
        ></div>
        <el-empty
          class="count-chart"
          description="暂无数据"
          v-show="chartData.length == 0"
        ></el-empty>
      </div>
      <div class="claymorphism block2">
        <div class="info">
          <div class="maxCount" ref="maxCount">
            <ul class="maxList">
              <li class="maxItem">
                <span>系部总数</span>
                <span class="count">{{ countData.department }}</span>
              </li>
              <li class="maxItem">
                <span>班级总数</span>
                <span class="count">{{ countData.classes }}</span>
              </li>
              <li class="maxItem">
                <span>学生总数</span>
                <span class="count">{{ countData.student }}</span>
              </li>
            </ul>
          </div>
          <div class="desc">
            <div class="header">
              <h3>帮助说明</h3>
            </div>
            <ul class="desc-list">
              <li class="desc-item">
                可以在左侧选择查看各系部学生和各班级学生的数量情况
              </li>
              <li class="desc-item">
                右侧是所有学生数量，系部数量，班级数量
              </li>
            </ul>
            <div class="header">
              <h3>本项目的实现</h3>
            </div>
            <ul class="desc-list">
              <li class="desc-item">
                本项目大量使用了Vue作为前端，将ElementUI作为ui框架，其中包含的知识有Vuex、Vue-Router、Axios、LocalStorage的使用、组件的定义和使用、路由守卫等...
              </li>
              <li class="desc-item">
                后端技术主要使用Golang作为开发语言，其中使用Gin作为Http框架，使用Gorm作为数据库增删改查的操作，使用Token代替Session，前端需要访问api的使用将Token加入鉴权...
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { getCountAllFromType, getCounts } from "../../api/api";
import * as echarts from "echarts";
import Vue from "vue";

// 主饼图
let countChart: echarts.ECharts;
// 最大数量
let maxCountChart: echarts.ECharts;

export default Vue.extend({
  data: () => ({
    countData: {},
    // 查询模式
    countMode: 1,
    modeList: [
      {
        value: 1,
        label: "按系部查询班级数量",
      },
      {
        value: 2,
        label: "按班级查询学生数量",
      },
    ],
    chartData: [],
  }),
  methods: {
    async changeCountChart(type: 1 | 2) {
      let res = await getCountAllFromType(type);
      let data: { name: string; count: number }[] = res.data.data;
      if (!data) data = [];
      let list: {
        value: number;
        name: string;
      }[] = [];
      (this.chartData as any) = list;
      data.forEach((item) => {
        list.push({
          value: item.count,
          name: item.name,
        });
      });
      changCountChart(list);
    },
  },
  async mounted() {
    let res = await getCounts();
    let countData = res.data;
    this.countData = countData;
    // doms
    let counts = this.$refs.counts;
    let maxCount = this.$refs.maxCount;
    maxCountChart = echarts.init(maxCount as HTMLElement);
    maxCountChart.setOption({
      tooltip: {
        trigger: "item",
      },
      xAxis: {
        type: "category",
        data: ["系部数量", "班级数量", "学生数量"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          type: "bar",
          showBackground: true,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#83bff6" },
              { offset: 0.5, color: "#188df0" },
              { offset: 1, color: "#188df0" },
            ]),
          },
          label: {
            show: true,
            position: "top",
          },
          data: [countData.department, countData.classes, countData.student],
        },
      ],
    });
    countChart = echarts.init(counts as HTMLElement);

    this.changeCountChart(1);
  },
});

function changCountChart(
  data: {
    value: number;
    name: string;
  }[]
) {
  countChart.setOption({
    legend: {
      top: "bottom",
    },
    tooltip: {
      trigger: "item",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "数据统计",
        type: "pie",
        radius: [20, 100],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        label: {
          show: true,
          fontSize: 16,
        },
        data,
      },
    ],
  });
}
</script>


<style lang="scss" scoped>
.claymorphism {
  display: flex;
  width: auto;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 26px;
  box-shadow: 35px 35px 68px 0px rgba(145, 192, 255, 0.5),
    inset -10px -10px 16px 0px rgba(145, 192, 255, 0.6),
    inset 0px 11px 28px 0px rgb(255, 255, 255);
  padding: 2rem;
  box-sizing: border-box;
}
.header {
  p {
    margin: 1rem 0;
    color: #999;
  }
}

.count-chart {
  width: 400px;
  height: 400px;
}

.actions {
  display: flex;
  .action-item {
    margin-right: 1rem;
  }
}

.content {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  .block1 {
    display: flex;
    flex-direction: column;
  }
  .block2 {
    flex-grow: 2;
    width: 0;
    .info {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      .maxCount {
        width: 440px;
        height: 440px;
      }
      .desc {
        width: 400px;
        .header {
          h3 {
            font-size: 24px;
          }
        }
        .desc-list {
          margin: 1rem 0;
          list-style: none;
          .desc-item{
            margin-top: 1rem;
            color: #999;
            line-height: 1.5;
          }
        }
      }
    }
  }
  .claymorphism {
    margin: 0 1rem;
  }
}
</style>